<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <meta name="format-detection" content="telephone=no" />
    <title>车主</title>
    <meta content="" name="keywords" />
    <meta content="" name="description" />
    <meta content="" name="copyright" />
    <meta content="" name="author" />
    <meta name="robots" content="noarchive">
    <link rel="stylesheet" href="css/public.css" />
    <link rel="stylesheet" href="css/swiper.min.css" />
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <!--头部-->
    <div class="return_top bgyellow">
        <a href="index.html">
            <span class="login_home cfff">首页</span>
        </a>
    </div>
    <!--//头部结束-->

    <div class="bgfff pt20">
        <div class="unionbg">
            <div class="clear mt10">
                <p class="fl union_photograph"><img src="temp/cardbgicon.png"></p>
                <div class="fr unionbg_fr">
                    <p class="fz30 pt10">自驾车主卡</p>
                    <p class="">车主卡</p>
                    <p class="fz32 pt30">0000 0000 1234 5623</p>
                </div>
            </div>
            <p class="tr mt20"><a href="mydata.html" class="union_activation">去购买</a></p>
        </div>
    </div>

    <div class="bgfff">
        <form action="" method="post" class="pb20" onsubmit="return carmaster_check(this)">
            <div class="car_name bb" id="car_name">
                <img src="temp/payphone.png" class="car_name_img">
                <input placeholder="绑定手机号" value="" keyboardtype="web-search" type="number" class="car_name_input fz28" id="phone">
            </div>
            <p class="cred tc pt10 hide tishi">请输入手机号</p>
            <p class="cred tc pt10 hide tishitext">手机或电话号码格式不正确。</p>
            <div class="retrievePassword clear">
                <div class="fl">
                    <img src="temp/yzm.png" class="retrievePassword_img fl mt25 mr10">
                    <input id="vcode" placeholder="请输入验证码" value="" keyboardtype="web-search" type="number" maxlength="6" class="fz28 retrievePassword_input fl">
                </div>
                <input type="button" class="fr c999 carmasterbutton" value="点击发送验证码" onclick="sendCode(this)" />
            </div>
            <div class="car_cont">
                <button type="button" class="w100 car_cont_submit fz32 cfff" id="register">注册</button>
            </div>
        </form>
    </div>

    <!-- <input type="button" style="height:32px;width:120px;" value="点击发送验证码" onclick="sendCode(this)" /> -->
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script src="layer/layer.js"></script>
    <script src="js/urlTool.js"></script>
    <script src="js/common.js"></script>
    <script type="text/javascript">
        var clock = '';
        var nums = 60;
        var btn;

        function sendCode(thisBtn) {
            btn = thisBtn;
            let phone = $("#phone").val();
            if (!(/^1[3456789]\d{9}$/.test(phone))) {
                layer.open({
                    content: '请输入正确的手机号',
                    btn: '我知道了'
                })
                return false;
            }
            sm.req({
                url: '/common/sendCode',
                dataType: 'json',
                type: 'post',
                data: {
                    phone: $("#phone").val()
                },
                done: function (res) {
                    if (res.code == 200) {
                        btn.disabled = true; //将按钮置为不可点击
                        btn.value = nums + '秒后可重新获取';
                        clock = setInterval(doLoop, 1000); //一秒执行一次
                    } else {
                        layer.open({
                            content: res.message,
                            btn: '我知道了'
                        });
                    }
                }
            });
        }

        function doLoop() {
            nums--;
            if (nums > 0) {
                btn.value = nums + '秒后可重新获取';
            } else {
                clearInterval(clock); //清除js定时器
                btn.disabled = false;
                btn.value = '点击发送验证码';
                nums = 60; //重置时间
            }
        }

        $("#register").on('click', function () {
            let phone = $("#phone").val();
            let vcode = $("#vcode").val();
            if (!(/^1[3456789]\d{9}$/.test(phone))) {
                layer.open({
                    content: '请输入正确的手机号',
                    btn: '我知道了'
                })
                return false;
            }
            if (vcode == "") {
                layer.open({
                    content: '请输入验证码',
                    btn: '我知道了'
                })
                return false;
            }
            sm.req({
                url: '/Member/bindingPhone',
                data: {
                    phone: phone,
                    vcode: vcode
                },
                done: function (res) {
                    removeCardMsg();
                    layer.open({
                        content: '注册成功',
                        btn: '我知道了',
                        yes: function () {
                            location.href = "myCenter.html";
                        }
                    });
                }
            });
        });
    </script>

</body>

</html>